<template>
  <div class="table-box">
    <el-empty v-if="!data.tableData.length" :description="$t('mes.noDataYet')"/>
    <el-table :span-method="genderSpanCity"
              :data="data.tableData"
              :fit="true" table-layout="fixed" header-align="center" stripe
              style="width:100%;height: 95%;"
              :header-cell-style="{color:'#000',textAlign:'center',borderColor:' #CCC',background:'#f9f9f9',height:'50px'}"
              v-else>
      <el-table-column label="AFL运营周报表/Operation Weekly Report" align="center" height="70px">
        <el-table-column prop="category" label="大类/Category" width="180" align="center"/>
        <el-table-column prop="item" label="项目/Item" width="300"/>
        <el-table-column v-for="column in data.tableColumns" :key="column.prop"
                         :prop="column.prop"
                         :label="column.label" align="center">
          <template #default="scope">
            {{ scope.row.custom[column.prop] }}
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>

import { defineProps, onMounted, reactive, watch } from 'vue'

const data = reactive({
  // tableData: [
  //   {
  //     category: '产出/Output',
  //     item: '入库柜数/Stockin CNTR',
  //     custom: '{"本周/This Week": 1, "上周/Last Week": "哈哈哈"}'
  //   }, {
  //     category: '产出/Output',
  //     item: '出库柜数/Delivery CNTR',
  //     custom: '{"本周/This Week": 1 }'
  //   }, {
  //     category: '产出/Output',
  //     item: '出货金额/Delivery Amount',
  //     custom: '{"本周/This Week": 1, "其他/Other": "哈哈哈"}'
  //   }, {
  //     category: '产出/Output',
  //     item: '现金流入/Cash ln',
  //     custom: '{"本周/This Week": 1 }'
  //   }, {
  //     category: '产出/Output',
  //     item: '现金流出/Cash Out',
  //     custom: '{"本周/This Week": 1 }'
  //   }, {
  //     category: '质量/Quality',
  //     item: '—次性合格率/FPY',
  //     custom: '{"本周/This Week": 1, "其他/Other": "哈哈哈"}'
  //   }, {
  //     category: '订单/Order',
  //     item: '在手订单/Order On Hand',
  //     custom: '{"本周/This Week": 1, "上周/Last Week": "哈哈哈"}'
  //   }, {
  //     category: '订单/Order',
  //     item: '准时交货率/OTD',
  //     custom: '{"本周/This Week": 1, "其他/Other": "哈哈哈"}'
  //   }, {
  //     category: '效率/Efficiency',
  //     item: '效率/Efficiency',
  //     custom: '{"本周/This Week": 1, "上周/Last Week": "哈哈哈"}'
  //   }, {
  //     category: '效率/Efficiency',
  //     item: '设备开机率/Equipment Running Ratio',
  //     custom: '{"本周/This Week": 1, "其他/Other": "哈哈哈"}'
  //   }, {
  //     category: '效率/Efficiency',
  //     item: '设备使用率/Utilized Equipment Efficiency',
  //     custom: '{"本周/This Week": 1, "其他/Other": "哈哈哈"}'
  //   }, {
  //     category: '库存/Inventory',
  //     item: '原辅料金额/RM Amount',
  //     custom: '{"本周/This Week": 1}'
  //   }, {
  //     category: '库存/Inventory',
  //     item: '成品柜数/FG CNTR',
  //     custom: '{"本周/This Week": 1, "上周/Last Week": "哈哈哈"}'
  //   }, {
  //     category: '库存/Inventory',
  //     item: '发泡板柜数/CORE CNTR',
  //     custom: '{"本周/This Week": 1 }'
  //   }, {
  //     category: '库存/Inventory',
  //     item: 'LVT上基材柜数LVT CNTR',
  //     custom: '{"本周/This Week": 1, "上周/Last Week": "哈哈哈"}'
  //   }
  // ], // 表头数据
  tableColumns: [],
  propArr: [],
  tableData: []
})

const props = defineProps({
  tableList: { type: String }
})

watch(() => [props.tableList], () => {
  data.tableData = props.tableList
  if (props.tableList != null) {
    data.tableColumns = []
    data.propArr = []
    data.tableData.forEach(item => {
      item.custom = JSON.stringify(item.custom)
      if (item.custom) {
        item.custom = JSON.parse(item.custom)
        Object.keys(item.custom).forEach(key => {
          if (data.propArr.indexOf(key) === -1) {
            data.propArr.push(key)
            data.tableColumns.push({
              prop: key,
              label: key
            })
          }
        })
      }
    })
  } else {
    data.tableData = []
    data.tableColumns = []
    data.propArr = []
    console.log(props.tableList, '无数据')
  }
})

onMounted(() => {
  // if (data.tableData != null) {
  //   data.tableData.forEach(item => {
  //     if (item.custom) {
  //       item.custom = JSON.stringify(item.custom)
  //       item.custom = JSON.parse(item.custom)
  //       Object.keys(item.custom).forEach(key => {
  //         if (data.propArr.indexOf(key) === -1) {
  //           data.propArr.push(key)
  //           data.tableColumns.push({
  //             prop: key,
  //             label: key
  //           })
  //         }
  //       })
  //     } else {
  //       item.custom = []
  //     }
  //   })
  // } else {
  //   data.tableData = []
  //   data.tableColumns = []
  //   console.log(props.tableList, '无数据')
  // }
})

// 合并行
const genderSpanCity = ({
  row,
  column,
  rowIndex,
  columnIndex
}) => {
  if (columnIndex === 0) {
    // 获取当前单元格的值
    const currentValue = row[column.property]
    // 获取上一行相同列的值
    const preRow = data.tableData[rowIndex - 1]
    const preValue = preRow ? preRow[column.property] : null
    // 如果当前值和上一行的值相同，则将当前单元格隐藏
    if (currentValue === preValue) {
      return {
        rowspan: 0,
        colspan: 0
      }
    } else {
      // 否则计算当前单元格应该跨越多少行
      let rowspan = 1
      for (let i = rowIndex + 1; i < data.tableData.length; i++) {
        const nextRow = data.tableData[i]
        const nextValue = nextRow[column.property]
        if (nextValue === currentValue) {
          rowspan++
        } else {
          break
        }
      }
      return {
        rowspan,
        colspan: 1
      }
    }
  }
}
</script>

<style scoped>
.table-box {
  height: 100%;
  width: 100%;
  background-color: #fff;
  overflow: hidden;
  padding: 10px;
  box-sizing: border-box;
}

</style>
